<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>Cascade Framework</title>
        <meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
        <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">

        </style>
    </head>
    <body class="narrow">
        <div class="site-center">
            <div class="site-body">
                <div class="site-header">
                    <div class="tags sitemenutags">
                        <div class="cell">
                            <ul class="nav blocks">
                                <li><a href="https://github.com/jslegers/cascadeframework/archive/master.zip">Download v1.5</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col width-fill sitemenu">
                        <div class="col width-fit mobile-width-fit">
                            <div class="cell">
                                <a href="index.html" class="logo"></a>
                            </div>
                        </div>
                        <div class="col width-fill mobile-width-fill">
                            <div class="cell">
                                <ul class="nav">
                                    <li><a href="grid.html">Grid</a></li>
                                    <li><a href="typography.html">Typography</a></li>
                                    <li><a href="icons.html">Icons</a></li>
                                    <li class="active"><a href="components.html">Components</a></li>
                                    <li><a href="templates.html">Templates</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="sitemenu-responsive col collapsible collapsed">
                        <div class="col collapse-trigger">
                            <div class="cell">
                                <ul class="nav ">
                                    <li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col">
                            <div class="left collapse-section">
                                <div class="cell">
                                    <ul class="nav">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="grid.html">Grid</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="components.html">Components</a></li>
                                        <li><a href="templates.html">Templates</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="cell">
                        <div class="col">
                            <div class="cell">
                                <div class="page-header">
                                    <h1>Components <small>documentation</small></h1>
                                </div>
                            </div>
                        </div>
                        <div class="col width-1of4">
                            <div class="cell menu">
                                <span class="tiny">Component types</span>
                                <ul class="left nav links">
                                    <li><a href="components.html">Panels</a></li>
                                    <li><a href="components-tabblocks.html">Tab blocks</a></li>
                                    <li class="active"><a href="components-tables.html">Tables</a></li>
                                    <li><a href="components-navigation.html">Navigation</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col width-fill">











                            <div class="col">
                                <div class="cell">
                                    <h2>Basic table</h2>
                                    <p>By default, a table has no styling.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table>
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>

                                                    <table>
                                                        <tr>
                                                            <th class="width-1of5">Company</th>
                                                            <td class="width-1of5">Q1</td>
                                                            <td class="width-1of5">Q2</td>
                                                            <td class="width-1of5">Q3</td>
                                                            <td>Q4</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Microsoft</th>
                                                            <td>20.3</td>
                                                            <td>30.5</td>
                                                            <td>23.5</td>
                                                            <td>40.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Google</th>
                                                            <td>50.2</td>
                                                            <td>40.63</td>
                                                            <td>45.23</td>
                                                            <td>39.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Apple</th>
                                                            <td>25.4</td>
                                                            <td>30.2</td>
                                                            <td>33.3</td>
                                                            <td>36.7</td>
                                                        </tr>
                                                        <tr>
                                                            <th>IBM</th>
                                                            <td>20.4</td>
                                                            <td>15.6</td>
                                                            <td>22.3</td>
                                                            <td>29.3</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Uppercase header</h2>
                                    <p>Using the "uppercase-header" class, your header becomes uppercase.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="uppercase-header">
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>

                                                    <table class="uppercase-header">
                                                        <tr>
                                                            <th class="width-1of5">Company</th>
                                                            <td class="width-1of5">Q1</td>
                                                            <td class="width-1of5">Q2</td>
                                                            <td class="width-1of5">Q3</td>
                                                            <td>Q4</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Microsoft</th>
                                                            <td>20.3</td>
                                                            <td>30.5</td>
                                                            <td>23.5</td>
                                                            <td>40.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Google</th>
                                                            <td>50.2</td>
                                                            <td>40.63</td>
                                                            <td>45.23</td>
                                                            <td>39.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Apple</th>
                                                            <td>25.4</td>
                                                            <td>30.2</td>
                                                            <td>33.3</td>
                                                            <td>36.7</td>
                                                        </tr>
                                                        <tr>
                                                            <th>IBM</th>
                                                            <td>20.4</td>
                                                            <td>15.6</td>
                                                            <td>22.3</td>
                                                            <td>29.3</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Box header</h2>
                                    <p>Using the "box-header" class, you can add a box type header to your table.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="box-header">
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>

                                                    <table class="box-header">
                                                        <tr>
                                                            <th class="width-1of5">Company</th>
                                                            <td class="width-1of5">Q1</td>
                                                            <td class="width-1of5">Q2</td>
                                                            <td class="width-1of5">Q3</td>
                                                            <td>Q4</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Microsoft</th>
                                                            <td>20.3</td>
                                                            <td>30.5</td>
                                                            <td>23.5</td>
                                                            <td>40.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Google</th>
                                                            <td>50.2</td>
                                                            <td>40.63</td>
                                                            <td>45.23</td>
                                                            <td>39.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Apple</th>
                                                            <td>25.4</td>
                                                            <td>30.2</td>
                                                            <td>33.3</td>
                                                            <td>36.7</td>
                                                        </tr>
                                                        <tr>
                                                            <th>IBM</th>
                                                            <td>20.4</td>
                                                            <td>15.6</td>
                                                            <td>22.3</td>
                                                            <td>29.3</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>









                            <div class="col">
                                <div class="cell">
                                    <h2>Outline header</h2>
                                    <p>Using the "outline-header" class, a header gets a larger font and is underlined.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="outline-header">
                                                        <thead>
                                                            <tr>
                                                                <th class="width-1of4">Comedy</th>
                                                                <th class="width-1of4">Adventure</th>
                                                                <th class="width-1of4">Action</th>
                                                                <th>Children</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>Scary Movie</td>
                                                                <td>Indiana Jones</td>
                                                                <td>The Punisher</td>
                                                                <td>Wall-E</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Epic Movie</td>
                                                                <td>Star Wars</td>
                                                                <td>Bad Boys</td>
                                                                <td>Madagascar</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Spartan</td>
                                                                <td>LOTR</td>
                                                                <td>Die Hard</td>
                                                                <td>Finding Nemo</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Dr. Dolittle</td>
                                                                <td>The Mummy</td>
                                                                <td>300</td>
                                                                <td>A Bug's Life</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                    <table class="outline-header">
                                                        <thead>
                                                            <tr>
                                                                <th class="width-1of5">Company</th>
                                                                <td class="width-1of5">Q1</td>
                                                                <td class="width-1of5">Q2</td>
                                                                <td class="width-1of5">Q3</td>
                                                                <td>Q4</td>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <th>Microsoft</th>
                                                                <td>20.3</td>
                                                                <td>30.5</td>
                                                                <td>23.5</td>
                                                                <td>40.3</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Google</th>
                                                                <td>50.2</td>
                                                                <td>40.63</td>
                                                                <td>45.23</td>
                                                                <td>39.3</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Apple</th>
                                                                <td>25.4</td>
                                                                <td>30.2</td>
                                                                <td>33.3</td>
                                                                <td>36.7</td>
                                                            </tr>
                                                            <tr>
                                                                <th>IBM</th>
                                                                <td>20.4</td>
                                                                <td>15.6</td>
                                                                <td>22.3</td>
                                                                <td>29.3</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>










                            <div class="col">
                                <div class="cell">
                                    <h2>Header border</h2>
                                    <p>Using the "header-border" class, you can add a border beneath the table's header row.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="header-border">
                                                        <thead>
                                                            <tr>
                                                                <th class="width-1of4">Comedy</th>
                                                                <th class="width-1of4">Adventure</th>
                                                                <th class="width-1of4">Action</th>
                                                                <th>Children</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>Scary Movie</td>
                                                                <td>Indiana Jones</td>
                                                                <td>The Punisher</td>
                                                                <td>Wall-E</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Epic Movie</td>
                                                                <td>Star Wars</td>
                                                                <td>Bad Boys</td>
                                                                <td>Madagascar</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Spartan</td>
                                                                <td>LOTR</td>
                                                                <td>Die Hard</td>
                                                                <td>Finding Nemo</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Dr. Dolittle</td>
                                                                <td>The Mummy</td>
                                                                <td>300</td>
                                                                <td>A Bug's Life</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>

                                                    <table class="header-border">
                                                        <thead>
                                                            <tr>
                                                                <th class="width-1of5">Company</th>
                                                                <td class="width-1of5">Q1</td>
                                                                <td class="width-1of5">Q2</td>
                                                                <td class="width-1of5">Q3</td>
                                                                <td>Q4</td>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <th>Microsoft</th>
                                                                <td>20.3</td>
                                                                <td>30.5</td>
                                                                <td>23.5</td>
                                                                <td>40.3</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Google</th>
                                                                <td>50.2</td>
                                                                <td>40.63</td>
                                                                <td>45.23</td>
                                                                <td>39.3</td>
                                                            </tr>
                                                            <tr>
                                                                <th>Apple</th>
                                                                <td>25.4</td>
                                                                <td>30.2</td>
                                                                <td>33.3</td>
                                                                <td>36.7</td>
                                                            </tr>
                                                            <tr>
                                                                <th>IBM</th>
                                                                <td>20.4</td>
                                                                <td>15.6</td>
                                                                <td>22.3</td>
                                                                <td>29.3</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>










                            <div class="col">
                                <div class="cell">
                                    <h2>Horizontal border</h2>
                                    <p>Using the "horizontal-border" class, you can add a beneath all table rows.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="horizontal-border">
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>










                            <div class="col">
                                <div class="cell">
                                    <h2>Border</h2>
                                    <p>Using the "border" class, you can add a border to all table cells.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="border">
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>











                            <div class="col">
                                <div class="cell">
                                    <h2>Box</h2>
                                    <p>Using the "box" class, you can add a border to your table.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="box">
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="col">
                                <div class="cell">
                                    <h2>Outline</h2>
                                    <p>Using the "outline" class, you can add an extra-thick black border to your table.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="outline">
                                                        <tr>
                                                            <th class="width-1of4">Comedy</th>
                                                            <th class="width-1of4">Adventure</th>
                                                            <th class="width-1of4">Action</th>
                                                            <th>Children</th>
                                                        </tr>
                                                        <tr>
                                                            <td>Scary Movie</td>
                                                            <td>Indiana Jones</td>
                                                            <td>The Punisher</td>
                                                            <td>Wall-E</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Epic Movie</td>
                                                            <td>Star Wars</td>
                                                            <td>Bad Boys</td>
                                                            <td>Madagascar</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Spartan</td>
                                                            <td>LOTR</td>
                                                            <td>Die Hard</td>
                                                            <td>Finding Nemo</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Dr. Dolittle</td>
                                                            <td>The Mummy</td>
                                                            <td>300</td>
                                                            <td>A Bug's Life</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>






                            <div class="col">
                                <div class="cell">
                                    <h2>Block</h2>
                                    <p>Using the "block" class, you can add a border to your table's columns.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="block">
                                                        <tr>
                                                            <th>Company</th>
                                                            <td>Q1</td>
                                                            <td>Q2</td>
                                                            <td>Q3</td>
                                                            <td>Q4</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Microsoft</th>
                                                            <td>20.3</td>
                                                            <td>30.5</td>
                                                            <td>23.5</td>
                                                            <td>40.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Google</th>
                                                            <td>50.2</td>
                                                            <td>40.63</td>
                                                            <td>45.23</td>
                                                            <td>39.3</td>
                                                        </tr>
                                                        <tr>
                                                            <th>Apple</th>
                                                            <td>25.4</td>
                                                            <td>30.2</td>
                                                            <td>33.3</td>
                                                            <td>36.7</td>
                                                        </tr>
                                                        <tr>
                                                            <th>IBM</th>
                                                            <td>20.4</td>
                                                            <td>15.6</td>
                                                            <td>22.3</td>
                                                            <td>29.3</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>












                            <div class="col">
                                <div class="cell">
                                    <h2>Datasheet</h2>
                                    <p>Using the "uppercase-header" class, your table gains a spreadsheet type layout. Add test fields to your table
                                        cells to make them editable.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <table class="datasheet">
                                                        <thead>
                                                            <tr>
                                                                <th style="width: 2%;">#</th>
                                                                <th style="width: 10%;" nowrap="nowrap">ID</th>
                                                                <th style="width: 20%;" nowrap="nowrap">Name</th>
                                                                <th style="width: 22%;" nowrap="nowrap">Dept</th>
                                                                <th style="width: 46%;" nowrap="nowrap">Notes</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <th>1</th>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                            </tr>
                                                            <tr>
                                                                <th>2</th>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                            </tr>
                                                            <tr>
                                                                <th>3</th>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                            </tr>
                                                            <tr>
                                                                <th>4</th>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                            </tr>
                                                            <tr>

                                                                <th>5</th>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                                <td><input type="text" /></td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>












                            <div class="col">
                                <div class="cell">
                                    <h2>Combinations</h2>
                                    <p>By combining these different techniques, you can easily build many different table layouts without the need for any custom styling. Herebelow
                                        are common layouts built by combining different table layouts and/or a panel.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="col">
                                            <div class="cell">
                                                <div class="col">
                                                    <div class="cell">
                                                        <table class="outline-header horizontal-border">
                                                            <tr>
                                                                <th>Comedy</th>
                                                                <th>Adventure</th>
                                                                <th>Action</th>
                                                                <th>Children</th>
                                                            </tr>
                                                            <tr>
                                                                <td>Scary Movie</td>
                                                                <td>Indiana Jones</td>
                                                                <td>The Punisher</td>
                                                                <td>Wall-E</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Epic Movie</td>
                                                                <td>Star Wars</td>
                                                                <td>Bad Boys</td>
                                                                <td>Madagascar</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Spartan</td>
                                                                <td>LOTR</td>
                                                                <td>Die Hard</td>
                                                                <td>Finding Nemo</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Dr. Dolittle</td>
                                                                <td>The Mummy</td>
                                                                <td>300</td>
                                                                <td>A Bug's Life</td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <table class="box-header uppercase-header block header-border">
                                                            <thead>
                                                                <tr>
                                                                    <th class="width-2of6">Company</th>
                                                                    <td class="width-1of6">Q1</td>
                                                                    <td class="width-1of6">Q2</td>
                                                                    <td class="width-1of6">Q3</td>
                                                                    <td>Q4</td>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <th>Microsoft</th>
                                                                    <td>20.3</td>
                                                                    <td>30.5</td>
                                                                    <td>23.5</td>
                                                                    <td>40.3</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Google</th>
                                                                    <td>50.2</td>
                                                                    <td>40.63</td>
                                                                    <td>45.23</td>
                                                                    <td>39.3</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Apple</th>
                                                                    <td>25.4</td>
                                                                    <td>30.2</td>
                                                                    <td>33.3</td>
                                                                    <td>36.7</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>IBM</th>
                                                                    <td>20.4</td>
                                                                    <td>15.6</td>
                                                                    <td>22.3</td>
                                                                    <td>29.3</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <table class="box-header header-border">
                                                            <thead>
                                                                <tr>
                                                                    <th class="width-2of6">Company</th>
                                                                    <td class="width-1of6">Q1</td>
                                                                    <td class="width-1of6">Q2</td>
                                                                    <td class="width-1of6">Q3</td>
                                                                    <td>Q4</td>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <th>Microsoft</th>
                                                                    <td>20.3</td>
                                                                    <td>30.5</td>
                                                                    <td>23.5</td>
                                                                    <td>40.3</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Google</th>
                                                                    <td>50.2</td>
                                                                    <td>40.63</td>
                                                                    <td>45.23</td>
                                                                    <td>39.3</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>Apple</th>
                                                                    <td>25.4</td>
                                                                    <td>30.2</td>
                                                                    <td>33.3</td>
                                                                    <td>36.7</td>
                                                                </tr>
                                                                <tr>
                                                                    <th>IBM</th>
                                                                    <td>20.4</td>
                                                                    <td>15.6</td>
                                                                    <td>22.3</td>
                                                                    <td>29.3</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <table class="outline-header border box-header outline">
                                                            <tr>
                                                                <th>Comedy</th>
                                                                <th>Adventure</th>
                                                                <th>Action</th>
                                                                <th>Children</th>
                                                            </tr>
                                                            <tr>
                                                                <td>Scary Movie</td>
                                                                <td>Indiana Jones</td>
                                                                <td>The Punisher</td>
                                                                <td>Wall-E</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Epic Movie</td>
                                                                <td>Star Wars</td>
                                                                <td>Bad Boys</td>
                                                                <td>Madagascar</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Spartan</td>
                                                                <td>LOTR</td>
                                                                <td>Die Hard</td>
                                                                <td>Finding Nemo</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Dr. Dolittle</td>
                                                                <td>The Mummy</td>
                                                                <td>300</td>
                                                                <td>A Bug's Life</td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <table class="block box-header outline-header uppercase-header outline">
                                                            <tr>
                                                                <th>Comedy</th>
                                                                <th>Adventure</th>
                                                                <th>Action</th>
                                                                <th>Children</th>
                                                            </tr>
                                                            <tr>
                                                                <td>Scary Movie</td>
                                                                <td>Indiana Jones</td>
                                                                <td>The Punisher</td>
                                                                <td>Wall-E</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Epic Movie</td>
                                                                <td>Star Wars</td>
                                                                <td>Bad Boys</td>
                                                                <td>Madagascar</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Spartan</td>
                                                                <td>LOTR</td>
                                                                <td>Die Hard</td>
                                                                <td>Finding Nemo</td>
                                                            </tr>
                                                            <tr>
                                                                <td>Dr. Dolittle</td>
                                                                <td>The Mummy</td>
                                                                <td>300</td>
                                                                <td>A Bug's Life</td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <div class="panel">
                                                            <div class="header">
                                                                My Data
                                                            </div>
                                                            <table class="body">
                                                                <tr>
                                                                    <th>Comedy</th>
                                                                    <th>Adventure</th>
                                                                    <th>Action</th>
                                                                    <th>Children</th>
                                                                </tr>
                                                                <tr>
                                                                    <td>Scary Movie</td>
                                                                    <td>Indiana Jones</td>
                                                                    <td>The Punisher</td>
                                                                    <td>Wall-E</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Epic Movie</td>
                                                                    <td>Star Wars</td>
                                                                    <td>Bad Boys</td>
                                                                    <td>Madagascar</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Spartan</td>
                                                                    <td>LOTR</td>
                                                                    <td>Die Hard</td>
                                                                    <td>Finding Nemo</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Dr. Dolittle</td>
                                                                    <td>The Mummy</td>
                                                                    <td>300</td>
                                                                    <td>A Bug's Life</td>
                                                                </tr>
                                                            </table>
                                                            <div class="footer pagination">
                                                                <ul class="nav">
                                                                    <li><a href="#">Prev</a></li>
                                                                    <li><a href="#">1</a></li>
                                                                    <li><a href="#">2</a></li>
                                                                    <li><a href="#">3</a></li>
                                                                    <li><a href="#">Next</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <div class="panel block">
                                                            <div class="header">
                                                                My Data
                                                            </div>
                                                            <table class="body">
                                                                <tr>
                                                                    <th>Comedy</th>
                                                                    <th>Adventure</th>
                                                                    <th>Action</th>
                                                                    <th>Children</th>
                                                                </tr>
                                                                <tr>
                                                                    <td>Scary Movie</td>
                                                                    <td>Indiana Jones</td>
                                                                    <td>The Punisher</td>
                                                                    <td>Wall-E</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Epic Movie</td>
                                                                    <td>Star Wars</td>
                                                                    <td>Bad Boys</td>
                                                                    <td>Madagascar</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Spartan</td>
                                                                    <td>LOTR</td>
                                                                    <td>Die Hard</td>
                                                                    <td>Finding Nemo</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Dr. Dolittle</td>
                                                                    <td>The Mummy</td>
                                                                    <td>300</td>
                                                                    <td>A Bug's Life</td>
                                                                </tr>
                                                            </table>
                                                            <div class="footer pagination">
                                                                <ul class="nav">
                                                                    <li><a href="#">Prev</a></li>
                                                                    <li><a href="#">1</a></li>
                                                                    <li><a href="#">2</a></li>
                                                                    <li><a href="#">3</a></li>
                                                                    <li><a href="#">Next</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <div class="panel border">
                                                            <div class="header">
                                                                My Data
                                                            </div>
                                                            <table class="body">
                                                                <tr>
                                                                    <th>Comedy</th>
                                                                    <th>Adventure</th>
                                                                    <th>Action</th>
                                                                    <th>Children</th>
                                                                </tr>
                                                                <tr>
                                                                    <td>Scary Movie</td>
                                                                    <td>Indiana Jones</td>
                                                                    <td>The Punisher</td>
                                                                    <td>Wall-E</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Epic Movie</td>
                                                                    <td>Star Wars</td>
                                                                    <td>Bad Boys</td>
                                                                    <td>Madagascar</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Spartan</td>
                                                                    <td>LOTR</td>
                                                                    <td>Die Hard</td>
                                                                    <td>Finding Nemo</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Dr. Dolittle</td>
                                                                    <td>The Mummy</td>
                                                                    <td>300</td>
                                                                    <td>A Bug's Life</td>
                                                                </tr>
                                                            </table>
                                                            <div class="footer pagination">
                                                                <ul class="nav">
                                                                    <li><a href="#">Prev</a></li>
                                                                    <li><a href="#">1</a></li>
                                                                    <li><a href="#">2</a></li>
                                                                    <li><a href="#">3</a></li>
                                                                    <li><a href="#">Next</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <div class="panel datasheet">
                                                            <div class="header">
                                                                My Data
                                                            </div>
                                                            <table class="body">
                                                                <thead>
                                                                    <tr>
                                                                        <th style="width: 2%;">#</th>
                                                                        <th style="width: 10%;" nowrap="nowrap">ID</th>
                                                                        <th style="width: 20%;" nowrap="nowrap">Name</th>
                                                                        <th style="width: 22%;" nowrap="nowrap">Dept</th>
                                                                        <th style="width: 46%;" nowrap="nowrap">Notes</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <th>1</th>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>2</th>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>3</th>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <th>4</th>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                    </tr>
                                                                    <tr>

                                                                        <th>5</th>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                        <td><input type="text" /></td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <div class="footer pagination">
                                                                <ul class="nav">
                                                                    <li><a href="#">Prev</a></li>
                                                                    <li><a href="#">1</a></li>
                                                                    <li><a href="#">2</a></li>
                                                                    <li><a href="#">3</a></li>
                                                                    <li><a href="#">Next</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>










                        </div>
                    </div>
                </div>
            </div>
            <div class="site-footer">
                <div class="cell">
                    <div id="sociallogos">
                        <a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
                        <a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
                        <a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
                        <div class="col">
                            &#169; 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
                        </div>
                    </div>
                    <a href="http://www.cascade-framework.com/" class="powered-by"></a>
                </div>
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>
